<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue基础语法</title>
  <style>
    .active {
      color: red;
    }
    .one {
      background-color: lightblue;
      border: 1px solid #aaa
    }
    .container {
      text-align: center;
    }
  </style>
  <!--1. 引入vue的库文件-->
  <script src="../vue.min.js"></script>
  <!--2. 引入bootstrap的样式-->
  <link rel="stylesheet" href="../bootstrap/bootstrap.min.css">
  <!--3. 引入jquery-->
  <script src="../bootstrap/jquery.min.js"></script>
  <!--4. 引入bootstrap的js库-->
  <script src="../bootstrap/bootstrap.min.js"></script>
</head>
<body>
  <div class="d">
    <h1>1. 双向数据绑定 <hr size="5" color="red"></h1>
    {{msg}} <br>
    <!--1.1 lazy修饰符：代表我们输入完成并确认后按下回车键，模型层与视图层数据才会同步。-->
    <input type="text" v-model.lazy="msg"> <br>
    <!--1.2 numer修饰符：代表输入的如果是数值型字符串会自动转换为数字，相当于parseInt()或parseFloat()-->
    <input type="text" v-model.number="num"> <br>
    <!-- 1.3 使用多个修饰符,trim代表去空格 -->
    content: {{content}} <br>
    <input type="text" v-model.lazy.trim="content"> <br>
    <h2>content: {{content}}</h2>
    num类型：{{typeof num}} <br>
    <h1>2. 事件处理 <hr size="5" color="red"></h1>
    num: {{num}} <br>
    <!--同时绑定多个事件-->
    <button v-on={click:addNum,mouseover:addNum}>+</button>
    {{num}}
    <!--事件参数传递-->
    <button @click="minusNum('小张',20,$event)">-</button>
    <h1>3. v-bind指令用法 <hr size="5" color="red"></h1>
    <h3>3.1 绑定属性<hr></h3>
    <p v-bind:title='title'>给P标签绑定title属性</p>
    <h3>3.2 绑定样式<hr></h3>
    <!--场景一【绑定一个样式类】：当isActive的值为true时，就绑定active样式类-->
    <button v-bind:class="{ active: isActive }" >我是按钮</button>
    <!--场景二【绑定多个样式表】：当isActive的值为true时，就绑定active样式类，有one这个样式，没有two样式-->
    <!--注意：v-bind可以简写为:-->
    <button :class="{ active: isActive, one: true, two: false }">我是按钮</button>
    <!-- 场景三：动态绑定style-->
    <h2 v-bind:style="{ color: fontColor, fontSize: fontSize + 'px' }">哈哈哈哈</h2>
    <!-- 场景四：动态的绑定属性, 这个属性是一个对象 -->
    <h2 :style="objStyle">呵呵呵呵</h2>
    <h1>4. v-if与v-show区别 <hr size="5" color="red"></h1>
    <!-- 绑定分数 -->
    <p>输入成绩：<input v-model="score" /></p>
    <!-- 4.1 v-if用法： 根据条件显示不同的内容 -->
    <h1 v-if="score > 90">优秀</h1>
    <h2 v-else-if="score > 80">良好</h2>
    <h3 v-else-if="score >= 60">及格</h3>
    <h4 v-else>不及格</h4>
    <!--4.2 v-if与v-show对比,区别如下：
        ① v-if隐藏时会将层删除，而v-show只是添加了display:none来隐藏层。
        ② v-show不用来回创建和销毁层，只有显示和隐藏层，所以，效率更高！
    -->
    <div v-if="show">v-if演示[存在]</div>
    <div v-show="show">v-show演示[存在]</div>
    <button @click="show=!show">切换显示show</button>
    <h1>5. v-for用法示例 <hr size="5" color="red"></h1>
    <div class="container">
      <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">商品列表展示</div>

          <table class="table table-bordered table-hover table-striped">
            <tr>
              <td>商品编号</td>
              <td>商品名称</td>
              <td>单价</td>
              <td>库存量</td>
              <td>操作</td>
            </tr>
            <tr v-for="p in productList" :key="p.pid">
              <td>{{p.pid}}</td>
              <td>{{p.pname}}</td>
              <td>{{p.price}}</td>
              <td>{{p.quantity}}</td>
              <td>
                <a href="#" class="btn btn-success btn-sm">修改</a>
                <a href="#" class="btn btn-danger btn-sm">删除</a>
              </td>
            </tr>
          </table>
        </div>
    </div>
  </div>
</body>
</html>
<script>
  let vs = new Vue({
    // 指定视图区域
    el: '.d',
    // 模型数据定义
    data: {
      msg: 'hello',
      num: 0,
      title: '这是一个段落,哈哈~~~',
      isActive:true,
      fontColor: 'blue',
      fontSize:20,
      objStyle: {
        fontSize: '50px',
        color: "green"
      },
      content: '',
      score: 0,
      show:true,
      // 商品列表
      productList: []
    },
    created(){
      this.init()
    },
    // 1. 普通方法定义
    methods: {
      init(){
        console.log("created...")
        this.productList.push({pid:1003,pname:"洽洽瓜子",price:5,quantity:200})
        this.productList.push({pid:1002,pname:"海飞丝洗发水",price:30,quantity:25})
        this.productList.push( {pid:1003,pname:"洽洽瓜子",price:5,quantity:200})
        this.productList.push({pid:1004,pname:"华为电脑",price:8000,quantity:45})
        this.productList.push( {pid:1005,pname:"海尔洗衣机",price:2500,quantity:230})
        this.productList.push({pid:1006,pname:"戴尔鼠标",price:20,quantity:150})
        this.productList.push( {pid:1007,pname:"《spark编程基础》",price:60,quantity:50})
        this.productList.push({pid:1008,pname:"《推荐系统开发实战》",price:75,quantity:120})
      },
        // 1.1 增加num
       addNum(event){
         this.num++
         console.log(event)
       },
      // 1.2 减少num的值 (可以获取传递的参数，如果要传递事件对象，
      // 有两种做法：
      // ① 可以不传任何参数,默认参数叫event，也是事件对象
      // ② 如果传递了其它参数，则事件对象要放在最后
      minusNum(name,age,event){
        console.log("name:",name)
        console.log("age:",age)
        console.log("event:",event)
         this.num--
         if (this.num <= 0) {
           this.num = 0
         }
      },

    },

    // 2. 计算属性定义
    computed: {

    }
  })
</script>
